<template>
    <span v-if="queryParams" >
        <el-form :key="showParams" :model="queryParams.sksParams" ref="queryForm" :inline="true" v-show="showSearch" :label-width="labelWidth"  @submit.native.prevent>
            <slot name="default"></slot>
            <span
                v-for="(item,index) in queryParamsColumnList"
                :key="item.vueVirtualUUID" >
                <template v-if="sksUtils.strIsEmpty(item.slot)" >
                    <el-form-item v-if="item.visible"  :style="item.itemStyle" :label="item.label" :prop="item.prop" >
                        <template v-if="item.htmlType=='none'">
                                <slot :name="`none-${item.prop}`" :queryItem="item">
                                </slot>
                        </template>
                        <template v-else-if="item.htmlType=='inputInteger'">
                            <el-input
                                v-model="queryParams.sksParams[item.prop]"
                                :placeholder="item.placeholder"
                                :clearable="item.clearable"
                                @keyup.enter.native="handleQuery"
                            />
                        </template>
                        <template v-else-if="item.htmlType=='inputFloat'">
                            <el-input-number
                                v-model="queryParams.sksParams[item.prop]"
                                :placeholder="item.placeholder"
                                :clearable="item.clearable"
                                :controls="false"
                                :precision="item.precision"
                                :min="item.min"
                                :max="item.max"
                                @keyup.enter.native="handleQuery">
                            </el-input-number>
                        </template>
                        <template v-else-if="item.htmlType=='sksFilterParamDateRange'">
                            <SksFilterParamDateRange
                                v-model="queryParams.sksParams[item.prop]"
                                :placeholder="item.placeholder"
                                :clearable="item.clearable"
                                @input="handleQuery"
                            >

                            </SksFilterParamDateRange>
                        </template>
                        <template v-else-if="item.htmlType=='sksFilterParamDateRangeYmdhms'">
                            <SksFilterParamDateRange
                                v-model="queryParams.sksParams[item.prop]"
                                type="datetimerange"
                                :placeholder="item.placeholder"
                                :clearable="item.clearable"
                                valueFormat="yyyy-MM-dd HH:mm:ss"
                                @input="handleQuery"
                            >
                            </SksFilterParamDateRange>
                        </template>
                        <template v-else-if="item.htmlType=='sksFilterParamStrRangeYm'">
                            <SksFilterParamDateRange
                                v-model="queryParams.sksParams[item.prop]"
                                queryFormat="2"
                                type="monthrange"
                                :placeholder="item.placeholder"
                                :clearable="item.clearable"
                                valueFormat="yyyy-MM"
                                @input="handleQuery"
                            >
                            </SksFilterParamDateRange>
                        </template>
                    <template v-else-if="item.htmlType=='sksFilterParamSearchValueList'">
                                                <SksFilterParamInput
                                                    :form-data="queryParams"
                                                    propName="searchValueList"
                                                    :placeholder="item.placeholder"
                                                    :clearable="item.clearable"
                                                    @keyup.enter.native="handleQuery"
                                                >
                                                </SksFilterParamInput>
<!--                                                    @input="handleQuery"-->
                        </template>

                    <template v-else-if="item.htmlType=='unFinish0Finish1'">
                        <SksStatusSelect
                            :form-data="queryParams.sksParams"
                            :prop-name="item.prop"
                            ref="unFinish0Finish1SelectRef"
                            :type="5"
                            @change="handleQuery" >
                        </SksStatusSelect>
                    </template>
                    <template v-else-if="item.htmlType=='dictFormat'">
                        <template v-if="item.selectOptions">
                            <sksFilterParamDictSelect :formData="queryParams.sksParams" :propName="item.prop" :dictList="item.selectOptions"
                                                         @change="handleQuery()"
                                                         @clear="handleQuery()">
                            </sksFilterParamDictSelect>
                        </template>
                        <template v-else>
                            <sksFilterParamDictSelect :formData="queryParams.sksParams" :propName="item.prop" :dictList="getDictOptionByItem(item)"
                                                         @change="handleQuery()"
                                                         @clear="handleQuery()">
                            </sksFilterParamDictSelect>
                        </template>
                        <!--                        {{ item}}-->
                        <!--                        <el-select-->
                        <!--                            v-model="queryParams.sksParams[item.prop]"-->
                        <!--                            clearable-->
                        <!--                            style="width: 240px"-->
                        <!--                            @change="handleQuery()"-->
                        <!--                            @clear="handleQuery()"-->
                        <!--                        >-->
                        <!--&lt;!&ndash;                            @visible-change="handleVisibleChange"&ndash;&gt;-->
                        <!--                            <el-option v-for="itemTmp in getDictOptionByItem(item)" :key="itemTmp.dictValue" :label="itemTmp.dictLabel" :value="itemTmp.dictValue" />-->
                        <!--                        </el-select>-->
                    </template>

                    <template v-else-if="item.htmlType=='checkbox'">
                        <SksCheckbox
                            @change="handleQuery()"
                            :formData="queryParams.sksParams"
                            :propName="item.prop">
                        </SksCheckbox>
                    </template>
                    <template v-else-if="item.htmlType=='dateFormatYmd'">
<!--                        <el-date-picker-->
                        <!--                            @change="handleQuery()"-->
                        <!--                            v-model="queryParams.sksParams[item.prop]"-->
                        <!--                            format="yyyy-MM-dd"-->
                        <!--                            valueFormat="yyyy-MM-dd"-->
                        <!--                            type="date"-->
                        <!--                            placeholder="选择日期">-->
                        <!--                        </el-date-picker>-->
                        <SksDate
                            format="yyyy-MM-dd"
                            valueFormat="yyyy-MM-dd"
                            :formData="queryParams.sksParams"
                            :propName="item.prop"
                            type="date"
                            @change="handleQuery()"
                        >

                        </SksDate>
                    </template>
                        <template v-else-if="item.htmlType=='input'">
                            <SksFilterParamInput :formData="queryParams.sksParams"
                                                    :propName="item.prop"
                                                    :placeholder="item.placeholder"
                                                    :clearable="item.clearable"
                                                    @keyup.enter.native="handleQuery"
                            >
                            </SksFilterParamInput>
                        </template>
                    <template v-else>
                            <SksFilterParamInput :formData="queryParams.sksParams"
                                                    :propName="item.prop"
                                                    :placeholder="item.placeholder"
                                                    :clearable="item.clearable"
                                                    @keyup.enter.native="handleQuery"
                            >
                            </SksFilterParamInput>
                    </template>
                    </el-form-item>
                </template>
                <template v-else>
                   <slot  :name="`custom-${item.slot}`" :queryItem="item">
                    </slot>
                </template>
            </span>
            <template v-if="showDeleteFilter">
                <el-form-item>
                  <el-radio-group v-model="queryParams.delFlag" style="margin-bottom: 30px;" @change="handleQuery()">
                    <el-radio-button >正常</el-radio-button>
                    <el-radio-button label="1">回收站</el-radio-button>
                  </el-radio-group>
                </el-form-item>
            </template>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
                <slot name="buttonAfter"></slot>
            </el-form-item>
        </el-form>
    </span>
</template>

<script>
import {findRowInListFromAttrName, isNullOrUndefined, notNullAndNotUndefined} from "../../../core";

export default {
    name: "SksTableQueryFormEl",
    props:{
        //true 显示已删除过滤选项
        showDeleteFilter: [Boolean],
        //form label 宽度
        labelWidth: [String],
        showSearch: [Boolean],
        queryParams:[Object],
        queryParamsColumnList:[Array],
        mainTable: [Object],
    },
    data(){
        return {
            sksSelectMap:{
                // inventoryItemTableLookup: {
                //     queryObject: {
                //         resultName: "mainList",
                //         qoName: 'inventoryItemQO',
                //         qoJson:{
                //             sksParams:{
                //             }
                //         },
                //     },
                //     optionKey: 'itemId',
                //     optionLabel: 'itemName',
                //     selectFormat: (item)=>{
                //         if(item.itemId==0){
                //             return `(请选择)`
                //         }
                //         return `${safeGetNullEmpty(item,'itemName')} - ${safeGetNullEmpty(item,'itemNum')}`
                //     },
                // },
            },

            //用于刷新显示
            showParams: true,
        }
    },
    watch:{
        "queryParams":{
            handler(val){
                if(val){
                    if(isNullOrUndefined(this.queryParams.sksParams)){
                        this.queryParams.sksParams={}
                    }
                    this.initPage()
                }
            },
            immediate: true,
        },
        mainTable:{
            handler(val){
                console.log("this.mainTable",this.mainTable)
                if(this.mainTable?.linkMap){
                    if(this.mainTable?.linkMap?.dictDataLoading==false){
                        this.$nextTick(()=>{
                            this.render()
                        })
                    }
                }
            },
            immediate: true,
        },
        queryParamsColumnList:{
            handler(val){
                if(val&&!isNullOrUndefined(this.queryParams?.sksParams)){
                    // this.initPage({resetSksParams:true})
                    this.initPage()
                }
            },
            immediate: true,
        }
    },
    methods:{
        initPage({resetSksParams=false}={}){
            console.log("initPage")
            this.$nextTick(()=> {
                console.log("initPage")
                this.queryParams.sksParamsLabel = {}
                // if(resetSksParams){
                //     this.ifNoneInitDefault()
                // }
                this.resetForm('queryForm')
                this.render()
                // if(resetSksParams){
                //     this.ifNoneInitDefault()
                // }
            })
        },
        ifNoneInitDefault(){
            for (let queryParamsColumn of this.queryParamsColumnList) {
                if (queryParamsColumn.defaultValue === 'undefined') {
                    this.queryParams.sksParams[queryParamsColumn.prop]=undefined
                }else if (queryParamsColumn.defaultValue === '') {
                    this.queryParams.sksParams[queryParamsColumn.prop]=''
                }else if (queryParamsColumn.defaultValue === '0') {
                    this.queryParams.sksParams[queryParamsColumn.prop]=0
                }else{
                    this.queryParams.sksParams[queryParamsColumn.prop]=queryParamsColumn?.defaultValue
                }
                console.log("queryParamsColumn.prop=",queryParamsColumn.prop,this.queryParams.sksParams[queryParamsColumn.prop])
            }
        },
        handleQuery(){
            this.$emit('handleQuery')
        },
        resetQuery(){
            this.$emit('resetQueryBefore')
            // this.queryParams.sksParams.responsibleUserIdEquals=0
            this.ifNoneInitDefault()
            this.queryParams.sksParams={}
            this.queryParams.searchValueList=undefined
            // this.ifNoneInitDefault()
            this.queryParams.sksParamsLabel={}
            this.resetForm('queryForm')
            this.$emit('resetQuery')
            console.log("resetQuery().queryParams",this.queryParams)
            this.render()
        },
        render(){
            this.showParams=false
            setTimeout(()=>{
                this.showParams=true
            },100)
        },
        getDictOptionByItem(item){
            console.log("sksTableQueryFormEl.getDictOptionByItem",item,this.mainTable?.linkMap)
            if(isNullOrUndefined(this.mainTable)||isNullOrUndefined(this.mainTable.linkMap)){
                return []
            }
            let dictTypeConf = findRowInListFromAttrName(this.mainTable.linkMap.dictTypeConfList||[],'prop',item.prop);
            if(isNullOrUndefined(dictTypeConf)){
                console.error("字典信息不存在,prop",item.prop)
                return []
            }
            if(isNullOrUndefined(dictTypeConf.dictType)){
                console.error("字典信息不存在,prop",item.prop,dictTypeConf)
                return []
            }
            const dictDataMap=this.mainTable.linkMap.dictDataMap
            if(isNullOrUndefined(dictDataMap)){
                return []
            }
            if(notNullAndNotUndefined(dictDataMap)){
                return dictDataMap.get(dictTypeConf.dictType);
            }
            return []

        },
    }

}
</script>

<style scoped>

</style>

<!--
        sksQueryConfigMap:{
            dictNameLike: sksParamColumn({
                htmlType: `input`,
                //根据map中的key为基准
                // prop: `nameLike`,
                label: '字典名称',
            }),
            dictTypeLike: sksParamColumn({
                htmlType: `input`,
                //根据map中的key为基准
                // prop: `nameLike`,
                label: '字典类型',
            }),
            createTimeBetween: sksParamColumn({
                htmlType: `sksFilterParamDateRange`,
                //根据map中的key为基准
                // prop: `nameLike`,
                label: '字典类型',
            }),
        },

      initMainTableParam(){
          return {
              queryParamsColumnListEnable: false,
              //搜索字段 会根据 sksAppName 自动查询后台配置
              queryParamsColumnList: sksQueryConfigMapToList(this.sksQueryConfigMap),
      },

      sksInitAfter(){
          this.mainTable.queryParams.pageSize=5
          getDicts('sys_normal_disable').then(res=>{
              let selectOptions=res.data
              let tmp=deepCopy(this.sksQueryConfigMap)
              tmp.statusEquals= sksParamColumn({
                  htmlType: `dictFormat`,
                  //根据map中的key为基准
                  // prop: `nameLike`,
                  label: '状态',
                  selectOptions: selectOptions,
              })
              this.mainTable.queryParamsColumnList= sksQueryConfigMapToList(tmp)
          })
      },

      <SksTableQueryFormEl :showDeleteFilter="true" :mainTable="mainTable" :queryParams="mainTable.queryParams" :showSearch="mainTable.showSearch" :queryParamsColumnList="mainTable.queryParamsColumnList" @handleQuery="handleQuery" @resetQuery="resetQuery">
          <template slot="default" slot-scope="{queryParams}">
          </template>
           <template slot="buttonAfter">
           </template>
      </SksTableQueryFormEl>

-->
